<template>
  <div style="position:relative">
    <el-table :data="body.content" style="100%" border class="basic-table" :header-cell-style="{background:'#1fb19e',color: '#fff',padding: '2px 0'}" @sort-change="sortChange"  highlight-current-row>
      <el-table-column type="index" :index="indexMethod" width="65" label="序号" v-if="tableType==='region'&&(body && body.content)">
      </el-table-column>
      <el-table-column v-if="column.name!=='regionId' && tableType==='region'" :sortable="column.name==='department'||column.name==='regionId'||column.name==='callType'||column.name==='levelId'||column.name==='userName'||column.name==='effectiveNum'?false:'custom'" v-for="column in header" :key="column.field" :label="column.field" align="center" :width="column.name==='department'?170:''">
        <template slot-scope="scope">
          <span @click="column.name!=='effectiveNum'&& column.name!=='department'&& column.name!=='callType'&& column.name!=='duration'?enterInfo(column.name, scope.row,column.field):''" class="click-span" :class="[column.name=='effectiveNum'|| column.name=='department'|| column.name=='callType'|| column.name=='duration'?'no-style':'can-click']">{{ scope.row[column.name] }}</span>
        </template>
      </el-table-column>
      <el-table-column type="index" :index="indexMethod" width="55" label="序号" v-if="tableType==='people'">
      </el-table-column>
      <el-table-column v-if="tableType==='people'" :sortable="column.name==='department'||column.name==='userName'||column.name==='callType'||column.name==='levelId'?false:'custom'" v-for="column in header" :key="column.field" :prop="column.name" :label="column.field" align="center" :width="column.name==='department'?120:column.name==='userName'||column.name==='levelId'||column.name==='callType'?100:''">
        <template slot-scope="scope">
          <span @click="column.name!=='effectiveNum'&& column.name!=='department'&& column.name!=='callType'&& column.name!=='duration'?enterInfo(column.name, scope.row, column.field):''" class="click-span" :class="[column.name=='effectiveNum'|| column.name=='department'|| column.name=='callType'|| column.name=='duration'?'no-style':'can-click']">{{ scope.row[column.name] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="mask" v-if="loading"></div>
    <div class="loading-area" v-if="loading">
      <table-loading :loading="loading"></table-loading>
      <div class="loading-text">努力加载中</div>
    </div>
    <div v-if="showImage" class="tip-image">
      <img src="@/assets/img/no_data.png" v-if="!stateSearch">
      <img src="@/assets/img/no_data_search.png" v-if="stateSearch">
    </div>
  </div>
</template>
<script>
/**
* @author 王磊
* @information 通话量表格组件
* @date 2019-1-12 15:32
* @param {*} header 通话量表头部数据
* @param {*} body 通话量表格数据
* @param {*} Pages 当前页数
* @param {*} size 当前数量
* @param {*} stateSearch 当前操作是不是搜索
*/
export default {
  props: {
    header: Object | Array,
    body: Object | Array,
    tableType: String,
    Pages: Number,
    size: Number,
    loading: {
      type: Boolean,
      default: false
    },
    stateSearch:Boolean
  },
  data () {
    return {
      
    }
  },
  computed:{
    /**
    * 监听body的值，如果有值则正常显示，没有显示提示图片
    * author 赵美阳
    * date 2019-04-14
    */
    showImage(){
      if(this.body.content){
        return this.body.content.length === 0 ? true : false
      }
    }
  },
  methods: {
    /**
   * @author 王磊
   * @information 进入详情
   * @date 2019-1-13 17:09
   */
    enterInfo (name, row, field) {
      let dataInfo = {
        name,
        row,
        field
      }
      this.$emit('enterInfo', dataInfo)
    },
    /**
   * @author 王磊
   * @information 表格升序降序
   * @date 2019-1-14 11:04
   */
    sortChange (val) {
      let data = {
        prop: val.prop ==='duration'?'callTime': val.prop,
        order: val.order === 'descending' ? 'DESC' : 'ASC'
      }
      this.$emit('sortChange', data)
    },
    /**
   * @author 王磊
   * @information 获取当前行的索引
   * @date 2019-1-16 10:04
   */
    indexMethod (index) {
      return index + (this.Pages - 1) * this.size + 1
    }
  }
}
</script>
